<template>
  <view class="bg-white bg-box">
    <view class="swiper-box">
      <swiperVideoImgs :imgs_arr="article_data.imgs_arr" :video="article_data.video"></swiperVideoImgs>
    </view>
    <view class="flex justify-between article-box">
      <view class="flex flex-direction article-box-left">
        <view class="flex">
          <view class="article-title">{{ article_data.title }}</view>
          <view v-if="article_data.is_self" class="flex align-start edit-box" @click="handleToGeneralRelease(article_data.id)">
            <view class="flex align-center">
              <view class="edit">编辑</view>
              <image src="/static/icon/detail/bianji_icon@2x.png" alt="" class="edit-icon"></image>
            </view>
          </view>
        </view>
        <view class="article-create-at">{{ article_data.created_at }}</view>
        <view class="flex align-center article-read-zan-num-box">
          <image src="/static/icon/detail/yuedu@2x.png" class="article-read-icon"></image>
          <view>{{ article_data.read_num }}</view>
          <view class="article-num-placeholder"></view>
          <image src="/static/icon/detail/minidianzan@2x.png"
                 style="width: 24upx; height: 26upx; margin-right: 10upx;"></image>
          <view>{{ article_data.zan_num }}</view>
        </view>
      </view>
      <view class="flex flex-direction align-end" style="width: 40%;">
        <view class="flex align-start" style="margin-bottom: 6%;" v-if="article_data.user"
              @click="handleToHomePage(article_data.user.id)">
          <view class="flex align-center">
            <view class="flex align-end">
              <image :src="article_data.user.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"
                     v-if="article_data.user"></image>
            </view>
            <view class="article-nick-name">
              {{ article_data.user && article_data.user.nick_name }}
            </view>
          </view>
        </view>
        <view v-if="!article_data.is_self">
          <view :class="!is_load?'loading':'over'" v-if="!article_data.attention"
                @click="handleAttention(article_data.user, article_data)"
                class="flex justify-center align-center cu-load attention-btn"
                style="background-color: #E52718; color: white;">
            关注
          </view>
          <view :class="!is_load?'loading':'over'" v-else @click="handleAttention(article_data.user, article_data)"
                class="flex justify-center align-center cu-load attention-btn"
                style="border: 2upx solid #E52718; color: #E52718;">
            已关注
          </view>
        </view>
      </view>
    </view>
    <!--富文本-->
    <view style="width: 100%; padding: 0 20upx; margin-bottom: 26upx;" v-html="article_data.content_html"></view>
    <view v-if="comment_list.length">
      <!--占位-->
      <view style="width: 100%; height: 20upx; background-color: #F8F8F8;"></view>
      <view style="padding: 0 20upx;">
        <view class="flex justify-between align-center"
              style="width: 100%; height: 80upx; border-bottom: 2upx solid #F8F8F8;">
          <view style="font-size: 30upx; color: #333333; font-weight: bold;">全部评论</view>
          <view @click="handleToAllComments(article_data.id)" style="font-size: 22upx; color: #999999;">查看更多</view>
        </view>
      </view>
      <view v-if="show_flag" class="flex" v-for="(item, index) in comment_list" :key="'A'+index"
            @click="handleToHotDiscussion(item.id)">
        <view class="flex" style="width: 100%; padding: 20upx; border-bottom: 2upx solid #F8F8F8;">
          <view style="width: 12%;">
            <image :src="item.user && item.user.avatar" mode="aspectFill" class="hot-discussion-avatar"></image>
          </view>
          <view class="flex flex-direction" style=" width: 88%;">
            <view class="flex justify-between">
              <view class="flex flex-direction">
                <view style="font-size: 22upx; color: #333333;" v-if="">{{ item.user && item.user.nick_name }}</view>
                <view style="font-size: 22upx; color: #999999;">{{ item.send_at }}</view>
              </view>
              <view class="flex justify-between">
                <image :src="item.is_zan ? select_like_img : like_img" style="width: 28upx; height: 28upx;"
                       @click.stop="handleChangeCommentLike(item.id)"></image>
                <image src="/static/icon/comments/pinglun@2x.png"
                       style="width: 30upx; height: 28upx; margin-left: 40upx;"
                       @click.stop="handlePopCommentBox(item.user.id, item.id)" v-if="item.user"></image>
              </view>
            </view>
            <view class="flex align-center" style="width: 100%; padding: 20upx 0; font-size: 26upx; color: #333333;">
              {{ item.content_html }}
            </view>
            <view class="flex" style="margin-bottom: 20upx;flex-wrap: wrap;">
              <view v-for="(com_imgs, index) in item.imgs_arr" :key="'A'+index" class="flex"
                    @click.stop="handlePreviewImgs(com_imgs,item.imgs_arr)">
                <image :src="com_imgs" class="hot-discussion-com-imgs" mode="aspectFill"></image>
              </view>
            </view>
            <view class="hot-discussion-son-combox" v-if="item.son_comments_num > 0">
              <view class="flex" style="font-size: 26upx; color: #333333;"
                    v-for="(comment, comment_index) in item.show_son_comments"
                    :key="'A'+comment_index">
                <view>
                  <span>{{ comment.user && comment.user.nick_name }}</span> <span style="margin: 0 10upx;">:</span>
                  <span style="font-size: 26upx;">{{ comment.content_html }}
                  <span v-if="comment.imgs_arr">
                  <image src="/static/icon/detail/tupian@2x.png"
                         style="width: 24upx; height: 26upx; vertical-align:middle;"></image>
                </span>
                </span>
                </view>
              </view>
              <view style="font-size: 26upx; color: #008CE6;" v-if="item.hot_num > 3">
                <span style="margin-right: 10upx;">{{ item.hot_num }}人热议</span>
                <image src="/static/icon/detail/fanhui-2_1@2x.png" style="width: 12upx; height: 20upx;"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="width: 100%; height: 92upx;"></view>
    <view class="flex justify-between align-center bottom-menu">
      <view class="flex flex-direction align-center" @click="handleChangeCollect(article_id)">
        <image :src="article_data.is_collection ? select_collect_img : collect_img"
               style="width: 44upx; height: 44upx;"></image>
        <view style="font-size: 22upx; color: #999999;">收藏</view>
      </view>
      <view class="flex flex-direction align-center" @click="handleChangeLike(article_id)">
        <image :src="article_data.is_zan ? select_like_img : like_img" style="width: 44upx; height: 44upx;"></image>
        <view style="font-size: 22upx; color: #999999;">点赞</view>
      </view>
      <view class="flex flex-direction align-center" @click="handlePopCommentBox()">
        <image src="/static/icon/detail/pinglun@2x.png" style="width: 42upx; height: 40upx;"></image>
        <view style="font-size: 22upx; color: #999999;">评论</view>
      </view>
    </view>
    <!--发布评论框-->
    <publishCommentDialog :comment_flag="comment_flag" :f_id="article_id" :f_table="'article'"
                          :receive_user_id="receive_user_id" :p_id="p_id" @handleCloseCommentBox="handleCloseCommentBox"
                          @handlePublishComment="handlePublishComment"></publishCommentDialog>
    <!--分享框 -->
    <shareDialog :share_flag="share_flag" :herf="'article'"
                 :intro="'我有一篇非常好的文章分享给你'"
                 :article_title="article_data.title" :article_id="article_id" :article_img="article_data.img"
                 @handleCloseShareDialog="handleCloseShareDialog"></shareDialog>
  </view>
</template>

<script>
import {chooseImage} from "utils/wxUtil";
import shareDialog from "components/share-dialog/share-dialog";
import publishCommentDialog from "components/publish-comment-dialog/publish-comment-dialog";
import swiperVideoImgs from "components/swiper-video-imgs/swiper-video-imgs"
import {article_getById} from "api/article/article";
import {attention_giveAttention} from "api/attention/attention"
import {comment_getListByCon, comment_publishComment} from "api/comment/comment"
import {zan_changeZan} from "api/like/like"
import {collection_changeCollection} from "api/collect/collect";
import {debounce} from "utils/wxUtil";

export default {
  components: {
    shareDialog,
    publishCommentDialog,
    swiperVideoImgs
  },
  data() {
    return {
      show_flag: false, //数据显示
      article_id: '', //文章id
      p_id: '', //评论id
      receive_user_id: '', //接收人id
      article_data: {}, //文章详情数据
      comment_flag: false, //评论框
      swiper_video: '', //轮播视频
      swiper_img_data: [], //轮播图片
      swiper_data: [], //轮播数据
      is_show_video: false, //是否展示视频
      is_load: true, //加载
      share_flag: false, //分享框
      is_attention: false, //是否关注
      is_like: false, //是否点赞
      is_comment_like: false, //是否评论点赞
      is_collect: false, //是否收藏
      select_like_img: '/static/icon/detail/dianzan-1@2x.png', //选中点赞图片
      like_img: '/static/icon/detail/dianzan@2x.png', //点赞图片
      select_collect_img: '/static/icon/detail/shoucang-2@2x.png', //选中收藏图片
      collect_img: '/static/icon/detail/shoucang-1@2x.png', //收藏图片
      comment_list: [], //评论列表
      screen_height: 0,
      jyJPush: [],
    }
  },
  methods: {
    //初始化
    pageInit() {
      article_getById({article_id: this.article_id}).then(res => {
        this.swiper_video = '';
        this.swiper_img_data = [];
        res.data.created_at = res.data.created_at.split(' ')[0];
        if (res.data && res.data.content_html) {
          res.data.content_html = res.data.content_html.replace(new RegExp(' style="" ', "g"), '');
          res.data.content_html = res.data.content_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        this.article_data = res.data;
        if (res.data.deleted_at) {
          const webView = this.$mp.page.$getAppWebview();
          webView.setTitleNViewButtonStyle(0, {
            "type": "text",
            text: ""
          })
        }
      }).catch(err => {
        uni.showToast({
          title: err.msg,
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          });
        }, 500)
      })
    },
    //去文章编辑页
    handleToGeneralRelease(article_id) {
      this.$uniNavigateTo({
        url: '/pages/publish/releaseType/generalRelease/generalRelease',
        query:{
          article_id
        }
      })
    },
    //获取评论数据
    getCommentData() {
      comment_getListByCon({f_table: 'article', f_id: this.article_id, p_id: 0}).then(res => {
        let temp_data = res.data.data.slice(0, 2)
        temp_data.forEach(item => {
          if (item.son_comments && item.son_comments.data) {
            item.son_comments_num = item.son_comments.data.length;
            item.show_son_comments = item.son_comments.data.slice(0, 3);
          }
        })
        this.comment_list = temp_data;
        this.show_flag = true;
      })
    },
    //评论点赞
    handleChangeCommentLike: debounce(function (f_id) {
      zan_changeZan({f_table: 'comment', f_id}).then(res => {
        let find = this.comment_list.find(x => x.id === f_id);
        find.is_zan ? find.is_zan = 0 : find.is_zan = 1;
      })
    }),
    //弹出评论框
    handlePopCommentBox(receive_user_id, p_id) {
      this.receive_user_id = receive_user_id;
      this.p_id = p_id;
      this.comment_flag = true;
    },
    //关闭评论框
    handleCloseCommentBox() {
      this.comment_flag = false;
    },
    //关闭分享模态框
    handleCloseShareDialog(e) {
      this.share_flag = false;
    },
    //关注
    handleAttention: debounce(function (user, article_data) {
      this.is_load = false;
      attention_giveAttention({f_table: 'account_user', f_id: user.id}).then(res => {
        article_data.attention = article_data.attention ? 0 : 1
        this.is_load = true;
      }).catch(err => {
        console.log(err)
      })
    }),
    //收藏
    handleChangeCollect: debounce(function (f_id) {
      collection_changeCollection({f_table: 'article', f_id}).then(res => {
        this.article_data.is_collection = this.article_data.is_collection ? 0 : 1;
      })
    }),
    //点赞
    handleChangeLike: debounce(function (f_id) {
      zan_changeZan({f_table: 'article', f_id}).then(res => {
        this.article_data.is_zan = this.article_data.is_zan ? 0 : 1;
      }).catch(err=>{
        console.log(err)
      })
    }),
    //去个人主页
    handleToHomePage(account_user_id) {
      this.$uniNavigateTo({
        url: '/pages/my/homePage/homePage',
        query:{
          account_user_id
        }
      })
    },
    //去全部评论页
    handleToAllComments(article_id) {
      this.$uniNavigateTo({
        url: '/pages/article/comments/allComments',
        query:{
          article_id
        }
      })
    },
    //去热议
    handleToHotDiscussion(p_id) {
      this.$uniNavigateTo({
        url: '/pages/article/comments/hotDiscussion',
        query:{
          p_id
        }
      })
    },
    //发布评论
    handlePublishComment: debounce(function (publishCommentData) {
      comment_publishComment(publishCommentData).then(res => {
        this.comment_flag = false;
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
        this.getCommentData();
      }).catch(err => {
        uni.showToast({
          title: err.msg,
          icon: 'none',
        })
      })
    }),
    //预览图片
    handlePreviewImgs(img, imgs_arr) {
      uni.previewImage({
        urls: imgs_arr,
        current: img
      });
    },
    //上传图片
    handleUploadImg() {
      chooseImage(8 - this.publish_imgs.length).then(res => {
        this.publish_imgs = this.publish_imgs.concat(res.image_array);
      })
    },
    //删除图片
    handleDeleteImg(index) {
      this.publish_imgs.splice(index, 1);
    }
  },
  //导航栏右侧分享按钮
  onNavigationBarButtonTap() {
    if(!this.article_data.deleted_at){
      this.share_flag = true;
    }
  },
  //导航栏左侧按钮
  onBackPress() {
    if (this.share_flag || this.comment_flag) {
      this.share_flag = false;
      this.comment_flag = false;
      return true
    }
  },
  //下拉刷新
  onPullDownRefresh() {
    this.pageInit();
    this.getCommentData();
    uni.stopPullDownRefresh();
  },
  onShow() {
    let page = getCurrentPages();//获取应用页面栈
    let currentPage = page[page.length - 1];//获取当前页面信息
    this.article_id = currentPage.options.article_id;
    this.pageInit();
    this.getCommentData();
  }
}
</script>

<style lang="less" scoped>
.article-num-placeholder{
  width: 2upx;
  height: 16upx;
  background-color: #C5C5C5;
  margin: 0 24upx;
}
.article-read-icon{
  width: 32upx;
  height: 24upx;
  margin-right: 10upx;
}
.article-read-zan-num-box{
  font-size: 20upx;
  color: #C5C5C5;
}
.article-create-at{
  font-size: 20upx;
  color: #999999;
  margin: 10upx 0;
}
.edit-icon{
  width: 26upx;
  height: 26upx;
}
.article-title{
  font-size: 30upx;
  color: #333333;
  font-weight: bold;
}
.article-box-left{
  width: 60%;
}
.article-box{
  width: 100%;
  padding: 0 20upx;
  margin-bottom: 40upx;
}
.swiper-box{
  width: 100%;
  height: 480upx;
  margin-bottom: 16upx;
}
.bg-box{
  width: 100%;
  height: 100vh;
}
/deep/ .cu-load.loading::after {
  content: '';
}

/deep/ .cu-load.over::after {
  content: '';
}

/deep/ .cu-load.over::before {
  content: '';
}

/deep/ .uni-swiper-dots {
  bottom: 24upx !important;
  width: auto;
}

/deep/ .uni-swiper-dot {
  width: 16upx !important;
  height: 16upx !important;
  background-color: white;
}

/deep/ .uni-swiper-dot-active {
  background-color: #E52718;
}

/deep/ .uni-swiper-dot-active::after {
  content: none !important;
  background-color: #E52718 !important;
}

.hot-discussion-son-combox {
  width: 630upx;
  border-radius: 10upx;
  padding: 18upx;
  background-color: #F8F8F8;
}

.hot-discussion-com-imgs {
  width: 200upx;
  height: 174upx;
  border-radius: 10upx;
  margin: 0 5% 5% 0;
}

.hot-discussion-avatar {
  width: 68upx;
  height: 68upx;
  border-radius: 50%;
  margin-right: 16upx;
}

.attention-btn {
  width: 140upx;
  height: 60upx;
  border-radius: 40upx;
  font-size: 24upx;
}

.article-nick-name {
  font-size: 24upx;
  color: #999999;
  margin-left: 10upx;
  text-align: right;
}

.swiper-bofang-btn {
  position: absolute;
  width: 50upx;
  height: 50upx;
  bottom: 25upx;
  right: 25upx;
}

.bottom-menu {
  width: 100%;
  height: 92upx;
  background-color: white;
  position: fixed;
  bottom: 0;
  z-index: 99;
  padding: 0 80upx;
}
.edit-box{
  //background-color: pink;
  width: 50%;
  //background-color: pink;
  margin-left: 4%;
}
.edit{
  font-size: 28upx;
  color: #4988FD;
}
</style>
